<template>
  <div class="apply-box">
    <Tabcase :titleinfo="titleinfo" @getActive="getActive"></Tabcase>
    <div v-show="!showCase" style="margin-top:55px">
      <div class="company-box mt10" v-for="(item,index) in companyArr" :key="index" v-show="companyArr.length">
        <div class="bottom-line company-div">
          <div>
            <div>{{item.enterpriseName}}</div>
            <div style="color:#999999" class="company-phone">{{item.applyTime}}</div>
          </div>
          <div v-if="!item.meetNum">
            <router-link to="/assessment">再次评估</router-link>
          </div>
        </div>
        <div class="case-box">
          <div v-if="item.meetNum" style="color:#2F54EB">有{{item.meetNum}}项融资产品与服务供您选择</div>
          <div v-else style="color:#FF4D4F">抱歉，当前暂无产品服务符合您的融资要求</div>
          <router-link :to="'/report/' + item.code">评估报告</router-link>
        </div>
      </div>
       <Empty v-show="!companyArr.length" description="暂无数据" />
    </div>
    <div v-show="showCase" class="serive-box" style="margin-top:55px">
      <div v-show="seriveArr.length" v-for="(item,index) in seriveArr" :key="index" class="serive-div">
        <div v-if="item.status!==2" class="bottom-line mt10 serive-info">
          <div class="info-top">
            <div>{{item.companyName}}</div>
            <div>{{item.applyTime}}</div>
          </div>
          <div
            style="color:red"
            class="info-bottom"
          >{{item.actionStatusNames}}</div>
        </div>
        <!-- <div v-if="item.status===2" class="bottom-line serive-info2">
          <div>
            <div>{{item.name}}</div>
            <div>{{item.status==2?'已取消':''}}</div>
          </div>
          <div>
            <div>{{item.time}}</div>
            <div>已取消时间：{{item.canceltime}}</div>
          </div>
        </div> -->
        <div>
          <Cell is-link @click="$router.push({ path:'/financing/' + item.planCode })" class="cell-box">
            <span style="color:#2F54EB">查看融资服务</span>
            <template slot="title">
              <div style="font-size:12px; width: 230px;">
                <span style="margin-right: 10px;" class="custom-text">融资顾问：{{ item.custServName ? item.custServName : "无" }}</span>
                <span class="custom-text" v-if="item.actionChildPlanRespList && item.actionChildPlanRespList.length">融资产品 x{{item.actionChildPlanRespList.length}}</span>
              </div>
            </template>
          </Cell>
          <div
            v-show="item.actionChildPlanRespList && item.actionChildPlanRespList.length"
            v-for="(item1,index1) in item.actionChildPlanRespList"
            :key="index1"
            class="servive-list"
          >
            <div class="bottom-line2">
              <div class="list-i">
                <div>
                  <div>{{item1.productName}}</div>
                  <div>融资金额：{{item1.financingAmount}}万元</div>
                </div>
                <div class="money-div">{{item1.productType}}</div>
              </div>
            </div>
            <Steps :active="item1.status" active-icon="success" active-color="#07c160">
              <Step>申请中</Step>
              <Step>待风控审核</Step>
              <Step>待付款前置收费项</Step>
              <Step>待放款机构审核</Step>
              <Step>待银行/机构签约放款</Step>
              <Step>待付款服务费</Step>
              <Step>服务完成</Step>
            </Steps>
          </div>
        </div>
      </div>
      <Empty v-show="!seriveArr.length" description="暂无数据" />
    </div>

    <div class="bottom-div">
      <button class="bottom-bun">
        <router-link style="color:#fff" to="/assessment">+ 融资评估申请</router-link>
        </button>
    </div>
  </div>
</template>

<script>
import { Cell, Steps, Step, Empty  } from "vant";
import Tabcase from "../../components/tabcase.vue";
import { listApplyBySelf, listSelfFinancingPlan } from "api/AsessmentApply";
import dateFormat from "utils/dateFormat";
export default {
  components: {
    Tabcase,
    Cell,
    Steps,
    Step,
    Empty
  },
  data() {
    return {
      active: 1,
      titleinfo: ["评估申请", "融资服务"],
      showCase: false,
      companyArr: [],
      seriveArr: [],
    };
  },
  methods: {
    getActive(data) {
      if (data) {
        this.showCase = true;
      } else {
        this.showCase = false;
      }
    },
    showserive() {},
  },
  created() {
    listApplyBySelf().then(({ code, data, message }) => {
      if (!code) {
        data.forEach((el) => {
          el.applyTime = dateFormat(
            new Date(el.applyTime),
            "yyyy-MM-dd HH:mm:ss"
          );
        });

        this.companyArr = data;
      } else {
        this.$toast(data);
      }
    });

    listSelfFinancingPlan().then(({ code, data, message }) => {
      if (!code) {
        data.forEach((el) => {
          
        switch (el.actionStatus) {
          case 1:
            el.actionStatusNames = "待融资顾问服务";
            break;
          case 2:
            el.actionStatusNames = "待服务定制";
            break;
          case 3:
            el.actionStatusNames = "待风控审核";
            break;
          case 4:
            el.actionStatusNames = "服务中";
            break;
          case 5:
            el.actionStatusNames = "已完成";
            break;
          case 6:
            el.actionStatusNames = "已取消";
            break;
          case 7:
            el.actionStatusNames = "风控审核不通过";
            break;
        }

          el.applyTime = dateFormat(
            new Date(el.applyTime),
            "yyyy-MM-dd HH:mm:ss"
          );
        });
        this.seriveArr = data;
      } else {
        this.$toast(data);
      }
    });
  },
};
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.bottom-line
  // margin-left rem(15)
  border-bottom rem(1) solid #EEEEEE
.mt10
  margin-top rem($m10)
.apply-box
  height 100vh
  background #F7F7F7
  overflow scroll
  .company-box
    height rem(138.5)
    background $infoColor
    .company-div
      display flex
      justify-content space-between
      align-items center
      padding rem(20) rem(15)
      font-size rem(15)
      color $titleColor
      .company-phone
        margin-top rem($m15)
    .case-box
      padding rem(20) rem(15)
      display flex
      justify-content space-between
      align-items center
      font-size rem(13)
      a
        width rem(72)
        line-height rem(23)
        text-align center
        color $baseColor
        border rem(1) solid $baseColor
        border-radius rem(11.5)
  .bottom-div
    margin-top rem($m30)
    margin-bottom rem(19.5)
    display flex
    justify-content center
    .bottom-bun
      position fixed
      bottom rem(70)
      left 50%
      transform translateX(-50%)
      font-size rem(13)
      color $infoColor
      background $baseColor
      width rem(124)
      height rem(30)
      border-radius rem(4)
      z-index 9
  .img-box
    width rem(244)
    height rem(175)
    margin rem(100) auto
    img
      width 100%
      height 100%
  .serive-box
    // padding rem(20) rem(15)
    // 
    .serive-div
      display flex
      flex-direction column
      margin-top rem(10)
      background $infoColor
      >>> .cell-box 
        >>> .van-icon::before
          color #2F54EB !important
      .bottom-line
        // margin-left rem(15)
        border-bottom rem(1) solid #EEEEEE
      .serive-info
        display flex
        justify-content space-between
        align-items center
        padding rem(10) rem(15)
        .info-top
          // height rem(85)
          div
            font-size rem($ft15)
            color #999999
          div:first-child
            font-weight 500
            color $titleColor
            margin-bottom rem($m15)
        .info-bottom
          font-size rem(14)
      .serive-info2
        display flex
        justify-content space-between
        flex-direction column
        padding rem(20) rem(15)
        div
          display flex
          justify-content space-between
      .cell-box
        color #333333
        font-size rem($ft15)
        font-weight 400
        justify-content space-between
    .servive-list
      width rem(345.5)
      height rem(137.5)
      border-radius rem(3)
      border rem(0.5) solid #999999
      margin rem(10) auto
      overflow hidden
        >>> .van-steps
          height rem(52)
        >>> .van-steps__items
          margin-bottom 0 !important
      .bottom-line2
        display flex
        justify-content space-between
        align-items center
        padding rem(10) rem(15)
        padding-left 0
        font-size rem($ft15)
        .list-i
          width 100%
          display flex
          justify-content space-between
          align-items center
          line-height rem(22)
        .money-div
          margin-top rem($m15)
.bottom-box
  position fixed
  bottom 0
  z-index 2
  background $infoColor
.bottom-line2
  margin-left rem(15)
  border-bottom rem(1) solid #EEEEEE
.red
  color #FF4D4F
.green
  color #83B713
>>> .van-step--horizontal 
  .van-step__title
    font-size rem(10)
    vertical-align top
.apply-box 
  >>> .van-tabs
    width 100% !important
    background $infoColor
.apply-box
  >>> .van-tabs__wrap
    width 50% !important
>>> .van-tabs__line
    background-color $baseColor !important
</style>